<script setup lang="ts">
    import {
        ref
    } from 'vue'
    import {
        mobileRules,
        passwordRules,
        codeRules
    } from '@/utils/rules'
    import {
        showSuccessToast,
        showToast
    } from 'vant';
    // 导入接口
    import {
        loginByPasswordAPI,
        sendCodeAPI,
        loginByCodeAPI
    } from '@/api/user'
    import {
        useUserStore
    } from '@/stores';
    import {
        useRoute,
        useRouter
    } from 'vue-router'
    const router = useRouter() //有带r的router是操作路由
    const route = useRoute()
    const store = useUserStore()
    const mobile = ref < string > ('13230000038')
    const password = ref < string > ("abc12345")
    const agreen = ref(false)
    const isPassword = ref(false)
    const code = ref < string > ('')

    // 控制输入密码的小眼睛
    const show = ref(false)

    const login = async() => {
        if (!agreen.value) {
            showToast("请勾选同意")
            return
        }

        // 登陆部分
        if (isPassword.value) {
            // 调用登录接口进行登录，如果登录成功跳转首页，否则登录失败
            const res = await loginByPasswordAPI(mobile.value, password.value)
            store.setUser(res.data)
        } else {
            const res = await loginByCodeAPI(mobile.value, code.value)
            store.setUser(res.data)
                // console.log(res)
        }

        // console.log('okok')
        showSuccessToast("登陆成功")
            // 跳到首页
            // 如果登录地址带有回跳地址的应该跳回那个地址，没有的提示登陆失败
        router.push(route.query.returnUrl as string || '/')
    }

    // 发送验证码
    // 有倒计时，如果倒计时没有归零，验证码不能被发送
    // 当倒计时归零后，调用验证码发送接口进行发送
    // 发送验证码后再开启倒计时，当倒计时归零应停止倒计时
    const time = ref(0)
    const send = async() => {
        // console.log('发送验证码')
        const res = await sendCodeAPI(mobile.value, 'login')
        console.log(res)
        if (time.value > 0) return
        time.value = 60 //60s
            // 开启定时器进行倒计时
        let timerId = window.setInterval(() => {
                time.value--
                    if (time.value == 0) window.clearInterval(timerId)
            }, 1000) //1000ms==1s

    }
</script>
<template>
  <div class="login-page">
    <cp-nav-bar
      right-text="注册"
      @click-right="$router.push('/register')"
    ></cp-nav-bar>
    <!-- 头部 -->
    <div class="login-head">
      <h3>{{ isPassword?"密码登录":"短信验证码登录" }}</h3>
      <a href="javascript:;">
        <span @click="isPassword=!isPassword">{{ isPassword?"短信验证码登录":"密码登录" }}</span>
        <van-icon name="arrow"></van-icon>
      </a>
    </div>
    <!-- 表单 -->
    <van-form autocomplete="off" @submit="login">
      <van-field placeholder="请输入手机号"
       type="tel" 
       :rules="mobileRules"
        v-model="mobile">
      </van-field>
      <van-field placeholder="请输入密码"
       v-if="isPassword"
        :type="show?'text':'password'" 
        :rules="passwordRules"
         v-model="password">
         <template #button>
            <cp-icon @click="show = !show" :name="`login-eye-${show ? 'on' : 'off'}`"></cp-icon>
        </template>

        </van-field>
      <van-field v-else v-model="code"
       :rules="codeRules" 
       placeholder="请输入验证码" 
       type="tel" >
        <template #button>
          <span class="btn-send" @click="send">{{time>0? time + "s后发送验证码" :"发送验证码"}}</span>
        </template>

</van-field>

<div class="cp-cell">
    <van-checkbox v-model="agreen">
        <span>我已同意</span>
        <a href="javascript:;">用户协议</a>
        <span>及</span>
        <a href="javascript:;">隐私条款</a>
    </van-checkbox>
</div>
<div class="cp-cell">
    <van-button block round type="primary" native-type="submit"> 登 录 </van-button>

</div>
<div class="cp-cell">
    <a href="javascript:;">忘记密码？</a>
</div>
</van-form>
<!-- 底部 -->
<div class="login-other">
    <van-divider>第三方登录</van-divider>
    <div class="icon">
        <img src="@/assets/qq.svg" alt="" />
    </div>
</div>
</div>

</template>

<style lang="scss" scoped>
    .login {
        &-page {
            padding-top: 46px;
        }
        &-head {
            display: flex;
            padding: 30px 30px 50px;
            justify-content: space-between;
            align-items: flex-end;
            line-height: 1;
            h3 {
                font-weight: normal;
                font-size: 24px;
            }
            a {
                font-size: 15px;
            }
        }
        &-other {
            margin-top: 60px;
            padding: 0 30px;
            .icon {
                display: flex;
                justify-content: center;
                img {
                    width: 36px;
                    height: 36px;
                    padding: 4px;
                }
            }
        }
    }
    
    .van-form {
        padding: 0 14px;
        .cp-cell {
            height: 52px;
            line-height: 24px;
            padding: 14px 16px;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            .van-checkbox {
                a {
                    color: var(--cp-primary);
                    padding: 0 5px;
                }
            }
        }
        .btn-send {
            color: var(--cp-primary);
            &.active {
                color: rgba(22, 194, 163, 0.5);
            }
        }
    }
</style>